<template>
	<view class="box">
		<!-- 上 -->
		<view style="height: 100rpx">
			<view class="tabsBox">
				<u-tabs :list="tabsList" @click="realTimeTabs" :scrollable="false" lineWidth="72rpx"></u-tabs>
			</view>
		</view>
		<base-loading :flag="showLoading" />
		<!-- 中间大盒子 -->
		<view class="centerBox plr15">
			<!-- 作业计划审批 -->
			<view v-if="tabsindex == 0">
				<u-checkbox-group v-model="workPlanIds" placement="column" @change="oddCheckChange1">
					<view class="boxItem  flex" v-for="(item,index) in planListApproval" :key="index"
						@click="itemClick(item.workPlanId,1)">
						<!-- 复选框 -->
						<u-checkbox shape="circle" :key="index" :name="item.workPlanId"
							v-if="item.userAuditType == '01' && item.state == '02'">
						</u-checkbox>
						<view>
							<!-- 审批图片 -->
							<image class="auditImg" :src="`../../static/iconAudit${item.state}.png`"></image>
							<view class="flex mb30">
								<view class="title">{{item.workPlanName}}</view>
							</view>
							<view class="flex mb20">
								<view class="name">工作负责人：</view>
								<view class="value">{{item.workManage}}</view>
							</view>
							<view class="flex mb20">
								<view class="name">开始时间：</view>
								<view class="value">{{item.beginTime}}</view>
							</view>
							<view class="flex mb20">
								<view class="name">结束时间：</view>
								<view class="value">{{item.endTime}}</view>
							</view>
							<view class="flex mb20">
								<view class="name">作业地点：</view>
								<view class="value">{{item.workPlace}}</view>
							</view>
							<view class="mtb20">
								<u-line color="#F5F6F9"></u-line>
							</view>
							<view class="flex">
								<image style="width: 28rpx;height: 28rpx;margin-top: 4rpx;"
									src="../../static/agentTime.png">
								</image>
								<text class="time">{{item.insertTime}}</text>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>

			<!-- 作业计划 -->
			<view v-else>
				<u-checkbox-group v-model="workIds" placement="column" @change="oddCheckChange2">
					<view class="boxItem flex" v-for="(item,index) in workPlan" :key="index"
						@click="itemClick(item.workPlanId,2)">
						<u-checkbox shape="circle" :key="index" :name="item.workPlanId"
							v-if="item.userAuditType == '01' && item.exeState =='01'">
						</u-checkbox>
						<view>
							<view class="audiText b1" v-if="item.exeState == '01'">未开工</view>
							<view class="audiText b2" v-if="item.exeState == '02'">正在执行</view>
							<view class="audiText b3" v-if="item.exeState == '03'">已完工</view>
							<view class="audiText b4" v-if="item.exeState == '04'">已取消</view>
							<view class="flex mb30">
								<view class="title">{{item.workPlanName}}</view>
							</view>
							<view class="flex mb20">
								<view class="name">工作负责人：</view>
								<view class="value">{{item.workManage}}</view>
							</view>
							<view class="flex mb20">
								<view class="name">开始时间：</view>
								<view class="value">{{item.beginTime}}</view>
							</view>
							<view class="flex mb20">
								<view class="name">结束时间：</view>
								<view class="value">{{item.endTime}}</view>
							</view>
							<view class="flex mb20">
								<view class="name">作业地点：</view>
								<view class="value">{{item.workPlace}}</view>
							</view>
							<view class="mtb20">
								<u-line color="#F5F6F9"></u-line>
							</view>
							<view class="flex">
								<image style="width: 28rpx;height: 28rpx;margin-top: 4rpx;"
									src="../../static/agentTime.png">
								</image>
								<text class="time">{{item.insertTime}}</text>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</view>

		<!-- 作业集合审批底部-->
		<view style="height: 188rpx" v-if="tabsindex == 0 && workPlanIds.length > 0">
			<view class="maintenance">
				<view class="flex-row flex-two pt20">
					<u-checkbox-group v-model="allSelectValue1" placement="column" @change="allCheckChange">
						<u-checkbox shape="circle" label="全选" name="1"></u-checkbox>
					</u-checkbox-group>
					<view class="flex flex-two">
						<view class="btn1" @click="editBtn">编辑</view>
						<view class="btn2" @click="batchApp">批量审核</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 作业集合审批批量弹框  -->
		<u-overlay :show="shows">
			<view class="warp">
				<view class="rect">
					<view class="topBox">
						<view>作业计划审批</view>
						<u-icon name="close" color="#fff" size="36rpx" @click="close"></u-icon>
					</view>
					<view class="bottomBox">
						<view class="bottomRight">
							<u--textarea v-model="textAareaValue" placeholder="请输入审批意见内容"></u--textarea>
						</view>
					</view>
					<view class="btnBox">
						<view class="cencle" @click="sureBtn('03')">通过</view>
						<view class="sure" @click="sureBtn('04')">退回</view>
					</view>
				</view>
			</view>
		</u-overlay>

		<!-- 作业计划底部 -->
		<view style="height: 188rpx" v-if="tabsindex == 1 && workIds.length > 0">
			<view class="batch-footer" @click="cancelBtn">
				<image class="applicantImg" src="../../static/cancelBtn.png">
				</image>
				<view style="color: #65717D;font-size: 28rpx;">
					取消作业
				</view>
			</view>
		</view>

		<!-- 取消作业弹框 -->
		<base-pop :show="cancelShow" :textFlag="true" @backSure="cancelSure" @cancelBtns="cancelShow = false">
		</base-pop>
	</view>
</template>

<script>
	import basePop from '../../components/base-pop/base-pop.vue'
	export default {
		components: {
			basePop
		},
		data() {
			return {
				showLoading: false,
				// 默认tabs下标
				tabsindex: 0,
				tabsList: [{
					name: '作业计划审批',
				}, {
					name: '作业计划',
				}],
				// 作业计划审批绑定全选的数据
				allSelectValue1: [],
				// 作业计划审批复选框选中的id
				workPlanIds: [],
				// 作业计划复选框选中的id
				workIds: [],
				// 作业计划审批的分页
				plan: {
					pageIndex: '1',
					pageSize: '10',
				},
				// 是否加载作业计划审批的标识
				reload: false,
				// 作业计划总数
				totalCount: 0,
				// 作业计划审批数据
				planListApproval: [],
				// 作业计划的分页
				planWork: {
					pageIndex: '1',
					pageSize: '10',
				},
				// 是否加载作业计划的表示
				reloads: false,
				// 作业计划审批总数
				workPlanCount: 0,
				// 作业计划数据
				workPlan: [],
				// 批量审批的弹框
				shows: false,
				textAareaValue: '',
				// 取消作业的弹框
				cancelShow: false
			}
		},
		onReachBottom() {
			if (this.tabsindex == 0) {
				if (this.totalCount > this.planListApproval.length) {
					this.plan.pageIndex++
					this.getAppWorkApprovalListInfo() // 执行方法
				}
			} else {
				if (this.workPlanCount > this.workPlan.length) {
					this.planWork.pageIndex++
					this.getAppWorkPlanListInfo() // 执行方法
				}
			}
		},
		onShow() {
			this.plan.pageIndex = '1'
			this.planListApproval = []
			this.totalCount = 0
			this.planWork.pageIndex = '1'
			this.workPlan = []
			this.workPlanCount = 0
			// 获取作业计划审批
			this.getAppWorkApprovalListInfo()

			this.getAppWorkPlanListInfo()
		},
		methods: {
			// 作业计划审批接口
			getAppWorkApprovalListInfo() {
				this.showLoading = true
				let that = this
				let params = {
					pageIndex: that.plan.pageIndex,
					pageSize: that.plan.pageSize
				}
				that.request(that.$api.getAppWorkApprovalListInfo, params, 'POST').then((res) => {
					if (res) {
						// // 后端返回的数据 
						setTimeout(() => {
							this.showLoading = false
							let rows = res.resultValue.items
							// // 后端返回作业计划审批数据的总数
							that.totalCount = res.resultValue.itemCount
							that.planListApproval = that.planListApproval.concat(rows)
						}, 300)
					}
				})
			},
			//作业计划的接口
			getAppWorkPlanListInfo() {
				this.showLoading = true
				let that = this
				let params = {
					pageIndex: that.planWork.pageIndex,
					pageSize: that.planWork.pageSize
				}
				that.request(that.$api.getAppWorkPlanListInfo, params, 'POST').then((res) => {
					if (res) {
						setTimeout(() => {
							this.showLoading = false
							// 后端返回的数据 
							let rows = res.resultValue.items
							// // 后端返回作业计划数据的总数
							that.workPlanCount = res.resultValue.itemCount
							that.workPlan = that.workPlan.concat(rows)
						}, 300)
					}
				})
			},
			realTimeTabs(e) {
				this.plan.pageIndex = '1'
				this.planListApproval = []
				this.totalCount = 0
				this.planWork.pageIndex = '1'
				this.workPlan = []
				this.workPlanCount = 0
				if (e.name == '作业计划审批') {
					uni.pageScrollTo({ //滚动条回到顶部
						scrollTop: 0,
						duration: 300
					})
					// 获取作业计划审批
					this.getAppWorkApprovalListInfo()
				} else {
					uni.pageScrollTo({ //滚动条回到顶部
						scrollTop: 0,
						duration: 300
					})
					// 获取作业计划
					this.getAppWorkPlanListInfo()
				}
				this.tabsindex = e.index
			},
			// 去作业申请页面
			itemClick(val, type) {
				if (type == '1') {
					// 跳转作业计划审批详情页面
					uni.navigateTo({
						url: './JobApplication/JobApplication?id=' + val
					})
				} else {
					// 跳转作业计划详情
					uni.navigateTo({
						url: './workPlanDetails/workPlanDetails?id=' + val
					})
				}
			},
			// 作业计划审批单选框
			oddCheckChange1(n) {
				// 作业计划审批选中的id
				this.workPlanIds = n
				// 全部数据有复选框的值
				let arr = []
				this.planListApproval.forEach((item) => {
					if (item.userAuditType == '01' && item.state == '02') {
						arr.push(item)
					}
				})
				if (n.length == arr.length) {
					this.allSelectValue1.push("1")
				} else {
					this.allSelectValue1 = []
				}
			},
			//作业计划审批全选框
			allCheckChange(n) {
				this.workPlanIds = []
				//全部数据有复选框的值
				let arr = []
				this.planListApproval.forEach((item) => {
					if (item.userAuditType == '01' && item.state == '02') {
						arr.push(item)
					}
				})
				if (n.length == 1) {
					arr.forEach((item) => {
						this.workPlanIds.push(item.workPlanId)
					})
				}
			},
			// 作业计划单选框
			oddCheckChange2(n) {
				this.workIds = []
				//全部数据有复选框的值
				let arr = []
				this.workPlan.forEach((item) => {
					if (item.userType.includes('01')) {
						arr.push(item)
					}
				})
				if (n.length == 1) {
					arr.forEach((item) => {
						this.workIds.push(item.workPlanId)
					})
				}
			},
			// 编辑按钮
			editBtn() {
				if (this.workPlanIds.length > 1) {
					uni.showToast({
						icon: 'none',
						title: '只能选择一项进行编辑！',
						duration: 2000
					});
				} else {
					// 跳转编辑作业申请
					uni.navigateTo({
						url: './editJobApplication/editJobApplication?id=' + this.workPlanIds,
					})
				}
			},
			// 批量申请按钮
			batchApp() {
				if (this.workPlanIds.length < 1) {
					uni.showToast({
						icon: 'none',
						title: '至少选中一项数据！',
						duration: 2000
					});
				} else {
					// 打开弹框
					this.shows = true
				}
			},
			close() {
				let that = this
				that.textAareaValue = ''
				// 弹框隐藏
				that.shows = false
			},
			// 批量审批弹框通过按钮
			sureBtn(state) {
				let that = this
				let params = []
				// 选中的id遍历添加obj对象中
				that.workPlanIds.forEach((id) => {
					params.push({
						state: state,
						auditComment: that.textAareaValue,
						workPlanId: id
					})
				})
				that.request(that.$api.auditWorkPlan, params, 'POST').then((res) => {
					if (res.code == 200) {
						uni.$u.toast(res.resultValue)
					} else {
						uni.$u.toast(res.resultValue)
					}
					that.planListApproval = []
					that.plan.pageIndex = '1'
					// 文本域输入值清空
					that.textAareaValue = ''
					// 清除全选数据
					that.allSelectValue1 = []
					// 清除作业计划审批复选框选中的id
					that.workPlanIds = []
					// 重新获取数据
					that.getAppWorkApprovalListInfo()
					// 弹框隐藏
					that.shows = false
				})
			},
			// 取消作业按钮展示弹框
			cancelBtn() {
				this.cancelShow = true
			},
			// 取消作业弹框确定
			cancelSure(val) {
				let that = this
				let params = []
				// 选中的作业计划id遍历
				that.workIds.forEach((id) => {
					params.push({
						cancelReason: val,
						workPlanId: id
					})
				})
				that.request(that.$api.cancelWorkPlan, params, 'POST').then((res) => {
					if (res.code == 200) {
						uni.$u.toast(res.resultValue)
					} else {
						uni.$u.toast(res.resultValue)
					}
					that.workPlan = []
					that.planWork.pageIndex = '1'
					// 清除作业计划审批复选框选中的id
					that.workIds = []
					// 重新获取数据
					that.getAppWorkPlanListInfo()
					// 弹框隐藏
					that.cancelShow = false
				})
			},
		}
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background-color: #F1F2F5;
		position: relative;
	}

	.tabsBox {
		box-sizing: border-box;
		height: 100rpx;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 520;
	}

	.centerBox {
		box-sizing: border-box;
		margin: 15rpx;
	}

	.boxItem {
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 16rpx;
		position: relative;
		overflow: auto;
		margin-bottom: 20rpx;
	}

	.auditImg {
		position: absolute;
		top: 10rpx;
		right: 20rpx;
		width: 90rpx;
		height: 90rpx;
	}

	.applicantImg {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		margin-top: 40rpx;
	}

	.audiText {
		width: 108rpx;
		height: 40rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 40rpx;
		position: absolute;
		right: 20rpx;
	}

	.b1 {
		border: 2rpx solid #FFA428;
		color: #FFA428;
	}

	.b2 {
		border: 2rpx solid #007AFF;
		color: #007AFF;
	}

	.b3 {
		border: 2rpx solid #30BA05;
		color: #30BA05;
	}

	.b4 {
		border: 2rpx solid #BEBEBE;
		color: #BEBEBE;
	}


	.grade {
		text-align: center;
		width: 64rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.title {
		font-size: 32rpx;
		width: 100%;
		padding-right: 120rpx;
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
	}

	.name {
		width: 180rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;
		padding-right: 20rpx;
	}

	.value {
		width: calc(100% - 180rpx);
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
		/* flex: 1; */
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.time {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #939EA8;
		margin-top: 3rpx;
	}

	.batch-footer {
		width: 100%;
		height: 188rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 60rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		border-top: 1px solid #CDCDCD;
		text-align: center;
	}

	.maintenance {
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		height: 188rpx;
		line-height: 188rpx;
		width: 100%;
		box-shadow: 0 -1px 11px 0 rgba(0, 0, 0, 0.09);
		text-align: center;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.btn1,
	.btn2 {
		width: 160rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 14rpx;
		background-color: #3473F9;
		color: #fff;
		font-size: 28rpx;
	}

	.btn2 {
		margin-left: 20rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 200rpx;
		height: 100%;
	}

	.rect {
		width: 80%;
		font-size: 32rpx;
	}

	.topBox {
		display: flex;
		justify-content: space-between;
		color: #fff;
		background-color: #637e85;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
	}

	.bottomBox {
		padding: 30rpx 40rpx 30rpx 40rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.btnBox {
		padding: 10rpx 20rpx 30rpx 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}



	>>>.u-textarea {
		padding: 10rpx 0 0 10rpx;
	}

	.cencle {
		width: 140rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #3473F9;
		color: #FFFFFF;
		margin-right: 20rpx;
		border-radius: 14rpx;
		text-align: center;
	}

	.sure {
		width: 140rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #3473F9;
		color: #FFFFFF;
		border-radius: 14rpx;
		text-align: center;
	}
</style>
